<template>
  <a-modal
    :width="550"
    :visible="visible"
    :title="modalTitle"
    @cancel="handleClose"
    centered
    :footer="null"
  >
    <div class="preview_item">
      <video
        :autoplay="true"
        style="width: 100%; height: 300px"
        controls
        :src="materialDetail.target_url || materialDetail.origin_url"
      ></video>
    </div>

    <div class="list">
      <div v-if="materialDetail.poster_url" class="back_item">
        <img :src="materialDetail.poster_url" alt="" />
      </div>
      <template v-for="back_item in materialDetail.image">
        <div class="back_item" v-if="back_item.type === 'image'">
          <img :src="back_item.url" alt="" />
        </div>
        <div class="back_item" v-if="back_item.type === 'video'">
          <video :src="back_item.url" :controls="false"></video>
        </div>
      </template>
    </div>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    materialDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  components: {},

  setup(props, context) {
    const state = reactive({});

    const handleClose = () => {
      context.emit("close");
    };

    const modalTitle = computed(() => {
      return "预览-" + props.materialDetail.title;
    });

    return {
      ...toRefs(state),
      modalTitle,
      handleClose,
    };
  },
});
</script>

<style lang="less" scoped>
.preview_item {
  background-color: #fff;

  .audio_item {
    width: 100% !important;
    height: 55px !important;
  }
}

.list {
  display: flex;
  align-items: center;
  transform: translateX(-5px);
  .back_item {
    width: 24px;
    height: 48px;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #323232;
    img {
      width: 100%;
    }
    video {
      width: 24px;
      height: 48px;
      object-fit: contain;
    }
  }
}
</style>
